module.exports = {
    config:{},
    ctx:{},
    x :0,
    y :0,
    init(id,obj){
        var ctx = uni.createCanvasContext(id, obj);
        // 填充背景色，白色
        ctx.setFillStyle('#ffffff'); // 默认白色
        ctx.fillRect(0, 0, this.config.width, this.config.height) 
        console.log(123);
        this.ctx=ctx
    },
    async sendImage(item){
        let path = await this.getImagePath(item.url)
        console.log(path);
       
        if (path.errMsg =="getImageInfo:ok") {

            this.ctx.save(); // 保存当前已绘制，不然后面绘制的都显示不了
            this.ctx.beginPath()

            const borderRadius = item.style.borderRadius||0
            if (item.isCircle && borderRadius>0) {
                let pad=0
                let oX = item.style.x + (item.style.width + pad) / 2
                let oY = item.style.y + (item.style.width + pad) / 2
                let r = borderRadius/2
                let w = item.style.width
                let h = item.style.height
                let x = item.style.x
                let y = item.style.y
                this.ctx.beginPath()
                this.ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)

                // this.ctx.arc(oX, oY + r, r, Math.PI, Math.PI * 1.5)
                this.ctx.lineTo(x + w - r, y)
                this.ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
                this.ctx.lineTo(x + w, y + h - r)
                this.ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
                this.ctx.lineTo(x + r, y + h)
                this.ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)

                this.ctx.closePath()
                this.ctx.setFillStyle('#000')
                this.ctx.fill()

                this.ctx.clip()

            // this.ctx.arc(oX, oY , (item.style.width+ pad )/ 2 , 0, Math.PI * 2, false);
            }
            this.ctx.drawImage(path.path,
                item.style.x, item.style.y,
                item.style.width, item.style.height)
        
            if (item.isCircle && borderRadius > 0) {
                this.ctx.restore()
            }

        }else{
            console.log(item);
        }


    },
    drawText(item={}){
        if (item.fontSize) {
            this.ctx.setFontSize(item.fontSize) // 字号

        }
        if (item.color) {
            this.ctx.setFillStyle(item.color) // 颜色
        }
        item.content = item.content.replace(/\n/g, " ");
        if (item.width) {
            let result = [];
            const maxLength =item.width/item.fontSize
            for (let i = 0; i < item.content.length; i += maxLength) {
                result.push(item.content.slice(i, i + maxLength));
            }
            result.map((items,i)=>{
                if (i<3) {
                    this.ctx.fillText(items, item.x, item.y + i * (item.fontSize + 5)); // （文字，x，y）
                }
            })
            console.log(result); 
        } else {
            this.ctx.fillText(item.content, item.x, item.y); // （文字，x，y）

        }





    },
    drawBox(item = {}) {
        if (item.background) {
            this.ctx.setFillStyle(item.background); // 默认白色
        }
        this.ctx.fillRect(item.x,item.y, item.width, item.height) 
       

    },



    getImagePath(image,isReturn=true){
        return new Promise((req, rej) => {
            uni.getImageInfo({
                src: image,
                success: function (res) {
                    req(res)
                },
                fail:(err)=>{
                    console.log(err);
                    req(err)

                }
            });
        })
    },
    async startDraw(config = {}, drawObj={}){
        console.log(config);
        console.log('------------------');
        this.config=config
        this.init(config.id,drawObj)
        uni.showLoading({
            title: '正在生成...',
            mask:false
        })
        for (let i = 0; i < config.list.length; i++) {
            const element = config.list[i];

            if (element.type=="image") {
                await this.sendImage(element)
            }
            if (element.type == "text") {
                await this.drawText(element)
            }
            if (element.type == "box") {
                await this.drawBox(element)
            }
        }
        uni.hideLoading()
        return new Promise((resolve, reject) => {
            this.ctx.draw(true, (ret) => { // draw方法 把以上内容画到 canvas 中。
                console.log(ret)
                resolve(ret)
                // uni.showToast({
                //     icon: 'success',
                //     mask: true,
                //     title: '生成成功',
                // });
                // // uni.canvasPutImageData({ 

            });
        })
       
    }
}